<template>
  <ul class="l-wrap">
    <li v-for="(i,index) in listData" :key="index">
      <div class="label">
        <slot name="icon"></slot>
        {{i.label}}
        <slot name="arrow"></slot>
      </div>
      <slot name="content"></slot>
    </li>
  </ul>
</template>

<script>
  export default {
    props: {
      listData: {
        default: []
      }
    }
  }
</script>

<style scoped lang="scss">
  @import "../css/mixin";

  .l-wrap {
    border-bottom: 1px solid #d8d8d8;
    border-top: 1px solid #d8d8d8;
    margin-top: 10px;
    > li {
      position: relative;
      min-height: 36px;
      display: flex;
      align-items: center;
      background-color: #fff;
      font-size: 13px;
      @include bord_bottom(12px);
      &:last-child:before {
        display: none;
      }
    }
  }
</style>
